<template>
    <div class="page">
        <p>弦图</p>
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            continent: ["亚洲", "欧洲", "非洲", "美洲", "大洋洲"],
            population: [
                [9000, 870, 3000, 1000, 5200],
                [3400, 8000, 2300, 4922, 374],
                [2000, 2000, 7700, 4881, 1050],
                [3000, 8012, 5531, 500, 400],
                [3540, 4310, 1500, 1900, 300]
            ]
        }
    },
    methods: {
        draw() {
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", 600)
                .attr("height", 600)
            let chords = d3
                    .chord()
                    .padAngle(0.02)
                    .sortGroups(d3.ascending),
                chordsData = chords(this.population)
            console.log(chords(this.population))
            let gChord = this.svg
                    .append("g")
                    .attr("transform", `translate(${600 / 2},${600 / 2})`),
                gOuter = gChord.append("g"),
                gInner = gChord.append("g"),
                color20 = d3.schemeCategory10,
                innerRadius = (600 / 2) * 0.7,
                outerRadius = innerRadius * 1.1,
                //弧生成器
                arcOuter = d3
                    .arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius)
            gOuter
                .selectAll(".outerpath")
                .data(chordsData.groups)
                .enter()
                .append("path")
                .attr("class", "outerpath")
                .style("fill", d => color20[d.index])
                .attr("d", arcOuter)
            //弧得文字添加
            gOuter
                .selectAll(".outertext")
                .data(chordsData.groups)
                .enter()
                .append("text")
                .each((d, i) => {
                    d.angle = (d.startAngle + d.endAngle) / 2
                    d.name = this.continent[i]
                })
                .attr("class", "outertext")
                .attr("dy", ".35em")
                .attr("transform", d => {
                    let result = `rotate(${(d.angle * 180) /
                        Math.PI}) translate(0,${-1 * (outerRadius + 10)})`
                    if (
                        d.angle > (Math.PI * 3) / 4 &&
                        d.angle < (Math.PI * 5) / 4
                    ) {
                        result += ` rotate(180)`
                    }
                    return result
                })
                .text(d => d.name)
            //创建弦生成器
            let arcInner = d3.ribbon().radius(innerRadius)
            gInner
                .selectAll(".innerpath")
                .data(chordsData)
                .enter()
                .append("path")
                .attr("class", "innerpath")
                .attr("d", arcInner)
                .style("fill", d => color20[d.source.index])
            //添加交互动画
            function fade(opacity) {
                return function(event,data) {
                    gInner
                        .selectAll(".innerpath")
                        .filter(d => d.source.index != data.index && d.target.index != data.index)
                        .transition()
                        .style("opacity", opacity)
                }
            }
            gOuter
                .selectAll(".outerpath")
                .on("mouseover", fade(0))
                .on("mouseout", fade(1))
        }
    },
    mounted() {
        this.draw()
    }
}
</script>
